import React, { useCallback, useEffect, useState } from 'react'

// css
import '../../style/inventory.less'

// antd
import {
  Form,
  Input,
  Button,
  Radio,
  Select,
  Cascader,
  DatePicker,
  InputNumber,
  TreeSelect,
  Switch,
  Upload,
  message,
} from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
import locale from 'antd/es/date-picker/locale/zh_CN';

// 图片转成 base64 格式
import getBase64 from '../../utils/base64'

// axios
import { addStockData, getInventories, getStocksWithID, updateStockOfCell } from '../../api/stock';

//
import { addRecordData } from '../../api/records'

// 导入 中国省份
import chinaCity from '../../utils/chinaCity'

// router
import { useLocation, useParams } from 'react-router-dom';

// qs
import qs from 'qs'

// moment
import moment from 'moment'

// redux
import { useSelector } from 'react-redux';

// 生成记录
import { generateAddStock, generateUpdateStock } from '../../utils/generateRecord';

export default function InventoryPost() {

  // 获取用户名
  const username = useSelector((state) => state.user.info)

  // 创建 form 实例 使用 from.setFieldsValue 来插入数值
  const [stockForm] = Form.useForm()

  // 根据是否传参选择是新建还是修改
  const [met, setMethod] = useState('create')

  // 使用 qs 截取 query 内容
  const params = qs.parse(useLocation().search, { ignoreQueryPrefix: true })

  useEffect(() => {
    // 函数，获取对应 id 商品的信息
    const getInitialValuesData = async(id) => {
      const data = await getStocksWithID(id)
      // console.log(data)
      // 解构赋值
      const { amount, name, imageUrl, inventoryId, weight, productionDate, origin, shelfLife, buyPrice } = data
      // 配置 initialValues
      const initialData = {
        img: imageUrl,
        name,
        amount,
        inventoryId,
        weight,
        productionDate: moment(productionDate, dateFormat),
        origin: origin.split(' '),
        shelfLife,
        buyPrice,
      }
      // 设置 initialValues
      stockForm.setFieldsValue(initialData)
      // 单独设置 显示
      setImageUrl(imageUrl)
      // 修改上传方法
      setMethod('post')
    }

    if (params.id) {
      // 将需要修改的数据显示到页面
      getInitialValuesData(params.id)
    } else {
      // 默认值
      const defaultInitialValues = {
        img: '',
        name: '',
        inventoryId: '',
        weight: '',
        productionDate: '',
        origin: '',
        shelfLife: 1,
        amount: 1,
        buyPrice: 0.01,
      }
      stockForm.setFieldsValue(defaultInitialValues)
      // 并且清空图片
      setImageUrl(null)
      // 修改上传方法
      setMethod('create')
    }
  }, [params.id])

  // 缓存图片的base64码
  const [imageUrl, setImageUrl] = useState(null)

  // 获取分类数据
  const [inventories, setInventoriesData] = useState([])

  // 产地 级联选择器的数据
  const [originData, setOriginData] = useState(chinaCity)

  // 时间格式
  const dateFormat = 'YYYY-MM-DD'

  // 发送请求，设置分类数据 useEffect => componentDidMount
  useEffect(() => {
    // 在其内部创建一个异步函数获取内容
    const getInventoriesData = async() => {
      // 发送请求
      const res = await getInventories()
      // 设置数据
      setInventoriesData(res.slice(0, (res.length - 1)))
    }

    getInventoriesData()
  }, [])

  // 表单提交方法
  const handleFinish = useCallback((values) => {
    // 对 values 其中数据进行处理
    // 根据 met 采用不同的操作
    const {name, inventoryId, weight, productionDate, origin, shelfLife, buyPrice, amount} = values
    // 首先生成所有数据
    const stockData = {
      imageUrl,
      name,
      inventoryId,
      weight,
      productionDate: productionDate.format('YYYY-MM-DD'),
      origin: origin.join(' '),
      shelfLife,
      buyPrice,
      amount,
    }
    // 如果是新增
    if (met === 'create') {
      addStockData(stockData)
        .then((data) => {
          message.success('成功为库存添加一件新商品！')
        })
        // 添加记录
      addRecordData(generateAddStock({name, username, amount}))
    }
    // 如果是修改
    if (met === 'post') {
      updateStockOfCell(params.id, stockData)
        .then((data) => {
          message.success('成功修改' + name + '商品的数据')
        })
        // 添加记录
      addRecordData(generateUpdateStock({name, username}))
    }
  }, [met, imageUrl])

  // 图片在上传前的操作
  const beforeUpload = useCallback((file) => {
    console.log(file.type)

    // 判断图片格式是否正确 jpeg/png
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('你只能上传 JPG(JPEG)/PNG 的文件！');
    }

    // 判断图像大小是否小于 2MB
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片大小必须小于2MB！');
      return false
    }

    // 图片转格式
    getBase64(file, (image) => {
      // 将 base64 码保存
      setImageUrl(image)
    })

    // 返回 false 可以让 upload 组件不发送
    return false
  }, [])

  return (
    <>
      <Form
        form={stockForm}
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 10,
        }}
        layout="horizontal"
        initialValues={{
          amount: 1,
          buyPrice: 0.01,
          shelfLife: 1,
        }}
        size={'small'}
        style={{
          color: '#f00',
        }}
        onFinish={handleFinish}
      >
        <Form.Item
          label="商品展示图"
          valuePropName="file"
          name="img"
        >
          <Upload
            name="avatar"
            listType="picture-card"
            showUploadList={false}
            beforeUpload={beforeUpload}
            maxCount={1}
          >
            {
              imageUrl
                ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
                : (
                  <div>
                    <PlusOutlined />
                    <div style={{ marginTop: 8 }}>选择照片</div>
                  </div>
                )
            }
          </Upload>
        </Form.Item>
        <Form.Item
          label="商品名称"
          name="name"
          rules={[{required: true, message: '请输入商品名称'}]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="选择分类"
          name="inventoryId"
          rules={[{required: true, message: '请选择商品的分类'}]}
        >
          <Select
            options={inventories}
            fieldNames={{
              label: 'title',
              value: 'id',
            }}
          >
          </Select>
        </Form.Item>
        <Form.Item
          label="单件重量"
          name="weight"
          rules={[{required: true, message: '请输入单件重量'}]}
        >
          <InputNumber min={0} addonAfter="g" step={5} />
        </Form.Item>
        <Form.Item
          label="生产日期"
          name="productionDate"
          rules={[{required: true, message: '请选择生产日期'}]}
        >
          <DatePicker locale={locale} format={dateFormat} />
        </Form.Item>
        <Form.Item
          label="原产地"
          name="origin"
          rules={[{required: true, message: '请选择商品原产地'}]}
        >
          <Cascader options={originData} />
        </Form.Item>
        <Form.Item
          label="保质期"
          name="shelfLife"
          rules={[{required: true, message: '请输入保质期'}]}
        >
          <InputNumber min={1} addonAfter="天" step={10} />
        </Form.Item>
        <Form.Item
          label="批发价格"
          name="buyPrice"
          rules={[{required: true, message: '请输入批发价格'}]}
        >
          <InputNumber min={0.01} addonAfter="￥" step={0.1} />
        </Form.Item>
        <Form.Item
          label="库存数量"
          name="amount"
          rules={[{required: true, message: '请输入商品数量'}]}
        >
          <InputNumber min={1} />
        </Form.Item>

        <Form.Item label=" " colon={false}>
          <Button type="primary" htmlType="submit">
            提交库存
          </Button>
        </Form.Item>

      </Form>
    </>
  )
}


/*
图片上传组件的修改
1. beforeUpload 为 false => 取消文件上传
2. beforeUpload 的参数 file 可以通过封装的 base64 函数转成可用的格式
3. 不需要其他多余的事件参数
*/
